<template>
  <div class="login-wrap" avalonctrl="vmRegistration">
    <div class="login-list">
      <h2>会员注册</h2>
      <div id="reg" class="form">
        <div>
          <label>手机号：</label>
          <input type="number" v-model="tel" id="mobile" name="mobile">
          <span>请正确填写手机号，以便接收验证码及注册成功后操作找回密码等</span>
        </div>
        <div>
          <label>请设置密码：</label>
          <input type="password" v-model="password" id="password" name="password">
          <span>密码长度为6-16位数字、字母组成</span>
        </div>
        <div>
          <label>请确认密码：</label>
          <input type="password" v-model="passwordRepeat" id="passwordConfirm" name="passwordConfirm">
          <span>请输入确认密码</span>
        </div>
        <div>
          <label>推荐码：</label>
          <input type="text" id="agentID" v-model="code" name="agentID">
          <span>请输入推荐码</span>
        </div>
        <div class="input-yanz">
          <label>验证码：</label>
          <input type="text" v-model="msg" name="vcode">
          <button @click="sendMsg" type="button">{{getYzm}}</button>
          <span>请收到验证码后60秒内输入</span>
        </div>
        <div class="form-group"></div>
        <p class="xieyi">
          <input type="checkbox" @click="changeAgree" :checked="isAgree">我已阅读并同意
          <a href="#" class="color00">《{{fw}}服务协议》</a>
        </p>
        <button @click="sendRegister" class="btn btn-zhuce" type="button" style="cursor: pointer">立即注册</button>
        <p class="login-d">
          <router-link to="/login/login" tag="a" class="color00">已注册账户？点击登录</router-link>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import Axios from "@/common/js/Axios";

export default {
  mounted(){
    this.getFw();
  },
  data() {
    return {
      fw: "",
      //获取到的验证码
      verificationKey: "",
      //处理60s验证码
      getYzm: "免费获取",
      canSend: true,
      //处理60s验证码
      isAgree: true,
      tel: "",
      password: "",
      passwordRepeat: "",
      code: "",
      msg: ""
    };
  },
  beforeDestroy() {
    clearInterval(tmpInterval);
  },
  methods: {
    getFw() {
      Axios.getAxios("/api/contactWay", {}).then(
        res => {          
          this.fw = res.data.data.web_title;
          console.log(this.fw)
        },
        err => {
          console.log(err);
        }
      );
    },
    //同意协议
    changeAgree() {
      this.isAgree = !this.isAgree;
    },
    //确认注册
    sendRegister() {
      if (!this.isAgree) {
        this.$message.error("请阅读并同意《时金在线服务协议》后注册");
        return false;
      }
      Axios.postAxios("/api/users", {
        code: this.code,
        phone: this.tel,
        verificationKey: this.verificationKey,
        verificationCode: this.msg,
        password: this.password,
        passwordRepeat: this.passwordRepeat
      }).then(
        async res => {
          console.log(res);
          if (!res.data.status) {
            this.$message.error(res.data.msg);
          } else {
            await this.$message.success("注册成功，请登录");
            this.$router.push("/login/login");
          }
        },
        err => {
          console.log(err.response);
        }
      );
    },
    //发送验证码
    sendMsg() {
      if (!this.canSend) {
        this.$message.error(`请等待${this.getYzm}后重发`);
        return false;
      }
      if (this.tel == "") {
        this.$message.error("电话号码不能为空");
        return false;
      }
      Axios.postAxios("/api/verificationCode/register", {
        phone: this.tel
      }).then(
        res => {
          if (!res.data.status) {
            this.$message.error(res.data.msg);
          } else {
            this.canSend = false;
            this.$message.success(res.data.msg);
            this.verificationKey = res.data.data.verificationKey;
            let time = 60;
            var tmpInterval = setInterval(() => {
              time--;
              this.getYzm = time;
              if (time == 0) {
                this.canSend = true;
                this.getYzm = "免费获取";
                clearInterval(tmpInterval);
              }
            }, 1000);
          }
        },
        err => {
          this.$message.error("发生未知错误");
        }
      );
    }
  }
};
</script>

<style lang="stylus" scoped>
@import '~@/assets/login/css/register';
#reg input {
  text-indent: 1em;
}
</style>


